<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
label,input {
	display: block;
	margin-top: 10px;
}

#actions a {
	margin-right: 5px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.dform-1.0.1.js"></script>
<script type="text/javascript" src="../js/dasding.js"></script>

<script type="text/javascript">
	function hanleEventData(eventdata) {
		$.ajax({
			url : "/dasding/api/events/categories/find",
			success : function(data) {
				var categoriesString = "";
				$(data.eventCategory).each(
						function() {
							var value = "";
							if (eventdata.category.id == this.id) {
								value = '{"selected" : "selected", "html" : "'
										+ this.name + '"}';
							} else {
								value = '"' + this.name + '"';
							}
							categoriesString = categoriesString + ',' + '"'
									+ this.id + '"' + ':' + value;
						});

				categoriesString = '{' + categoriesString.substring(1) + "}";
				createForm('PUT', eventdata, JSON.parse(categoriesString));
			}
		});
	}

	function hanleNewEvent() {
		$.ajax({
			url : "/dasding/api/events/categories/find",
			success : function(data) {
				var categoriesString = "";
				$(data.eventCategory).each(
						function() {
							categoriesString = categoriesString + ',' + '"'
					         + this.id + '"' + ':' + '"' + this.name + '"';
						});

				categoriesString = '{' + categoriesString.substring(1) + "}";
				console.log(categoriesString);
				createForm('POST', {
					"name" : "",
					"date" : "",
					"location" : ""
				}, JSON.parse(categoriesString));
			}
		});
	}

	function createForm(method, eventdata, categories) {
		console.log(eventdata);
		var id = "";
		if (eventdata.id) {
			id = "/id/"+eventdata.id;
		}
		$("#content").dform({
			"action" : "/dasding/api/events"+id,
			"method" : method,
			"html" : [ {
				"type" : "p",
				"html" : "Edit Event"
			}, {
				"name" : "name",
				"id" : "name",
				"caption" : "Event Name",
				"type" : "text",
				"value" : eventdata.name
			}, {
				"name" : "description",
				"id" : "description",
				"caption" : "Event Description",
				"type" : "textarea",
				"value" : eventdata.description
			}, {
				"name" : "categoryid",
				"id" : "categegory",
				"caption" : "Event Category",
				"type" : "select",
				"options" : categories
			}, {
				"name" : "time",
				"id" : "time",
				"caption" : "Event Time",
				"type" : "text",
				"value" : eventdata.time
			}, {
				"name" : "locationid",
				"id" : "location",
				"caption" : "Event Location",
				"type" : "text",
				"value" : eventdata.location.id
			}, {
				"type" : "submit",
				"value" : "Save"
			} ]
		});

		//browsers do not support http methods put and delete
		$('#content:first-child').submit(function(event) {
			submitForm(event);
		});
	}
</script>
<script type="text/javascript">
	$(document).ready(
			function() {
				if (getURLParameter('id') != 'null') {
					$.ajax({
						url : "/dasding/api/events/id/"
								+ getURLParameter('id'),
						success : function(data) {
							hanleEventData(data);
						}
					});
					$('#actions').append(
							'<a href="/dasding/api/events/id/'
									+ getURLParameter('eventid')
									+ '">Delete</a>');
					$('#actions').append(
							'<a href="/dasding/api/events/id/'
									+ getURLParameter('eventid')
									+ '">Cancel</a>');
					$('#actions').append(
							'<a href="/dasding/api/events/id/'
									+ getURLParameter('eventid')
									+ '">WillHappen</a>');

				}
				if (getURLParameter('id') == 'null') {
					hanleNewEvent();
				}
			});
</script>
</head>
<body>
	<div id="content" class="events"></div>
</body>
</html>